<template>
	<view>
		<view v-show="!loadingone">
			<navbar name="疾病详情"></navbar>
			<view class="w706 particularsp" >
				<view class="particulars-title">
					<!-- 脂肪肝 -->
					{{result.diseaseName}}
				</view>
				<view class="shade" v-if="userAnsId !=''">
					<view :class="'shade-pa'+result.risk">
						<view class="shade-pr">
							{{result.riskWeight}}
						</view>
					</view>
				</view>
				<view class="weui-flex" v-if="userAnsId !=''">
					<view class="type-text type-texta">
						较低
					</view>
					<view class="type-text type-texta">
						一般
					</view>
					<view class="type-text type-texta">
						较高
					</view>
					<view class="type-text">
						极高
					</view>
				</view>
				<block v-for="(item,idx) in result.riskNameList" :key="idx">
					<view class="causeView" style="margin-top:20upx;">
						{{item}}
					</view>
				</block>
			</view>
			<!-- v-show="result.diseaseDesc&& userAnsId!=''" -->
			<view class="w706 causeB" v-show="result.diseaseDesc">
				<!-- <text>{{result.diseaseDesc}}</text> -->
				<!-- <text >{{result.diseaseDetail}}</text> -->
				<!-- <rich-text :nodes="result.diseaseDetail"></rich-text> -->
				<!-- <rich-text :nodes="result.diseaseDesc"></rich-text> -->
				<u-parse :html="result.diseaseDesc"></u-parse>
			</view>
			<view class="w706 causeB" v-if="result.diseasePathogeny">
				<view class="causeTitle">
					病因
				</view>
				<u-parse :html="result.diseasePathogeny"></u-parse>
				 <!-- <rich-text :nodes="result.diseasePathogeny"></rich-text> -->
				<!-- <text>
					{{result.diseasePathogeny}}
				</text> -->
				<!-- 肝脏是机体脂质代谢的中心器官，肝内脂肪主要来源于食物和外周脂肪组织，导致脂质在肝细胞内沉积的代谢异常机制并没有完全明确，目前认为脂肪肝的形成与以下因素有关。 -->
			</view>
			<view class="w706 causeB" v-if="result.diseaseSymptom&&result.diseaseSymptom!=''">
				<view class="causeTitle">
					症状
				</view>
				<block v-for="(item,idx) in result.diseaseSymptom" :key="idx">
					<view class="causeView" style="margin-top:20upx;">
						{{item}}
					</view>
				</block>
			</view>
			<view class="w706 suggest">
				<view class="causeTitle weui-flex">
					<view style="width: 400upx;">
						饮食建议
					</view>
					<view class="suitable" :class="foodYiji?'actavecolor':''" @click="foodYiji=true">
						宜吃食物
					</view>
					<view class="avoid" :class="!foodYiji?'actavecolor':''" @click="foodYiji=false">
						禁吃食物
					</view>
				</view>
				<!-- 宜吃食物 -->
				<view v-if="foodYiji">
					<view class="weui-flex flex-jy" v-for="(item,idx) in result.fitFoodIdList" :key="idx" v-show="idx <3"
					@tap.stop="navurl('/pages/subpackage/find/foodMaterial/foodMaterial?id='+item.id+'&count=4')"
					v-if="item.id!= undefined">
						<view class="flexImagel">
							<u-lazy-load height="114" border-radius="10" img-mode="aspectFill" :image="item.foodImageUrl">
							</u-lazy-load>
						</view>
						<view class="flexRview">
							<view class="flexTitle">
								{{item.food}}
							</view>
							<view class="flexText ellipsis" v-show="item.introduce">
								{{item.introduce}}
							</view>
						</view>
					</view>
				</view>
				<!-- 忌吃食物 -->
				<view v-else>
					<view class="weui-flex flex-jy" v-for="(item,idx) in result.avoidFoodIdList" :key="idx" v-show="idx <3"
					@tap.stop="navurl('/pages/subpackage/find/foodMaterial/foodMaterial?id='+item.id+'&count=4')"
					v-if="item.id!= undefined">
						<view class="flexImagel">
							<u-lazy-load height="114" border-radius="10" img-mode="aspectFill" :image="item.foodImageUrl">
							</u-lazy-load>
						</view>
						<view class="flexRview">
							<view class="flexTitle">
								{{item.food}}
							</view>
							<view class="flexText ellipsis" v-show="item.introduce">
								{{item.introduce}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="w706 suggest">
				<view class="causeTitle">
					运动建议
				</view>
				<view class="exercise">
					<block v-for="(item,idx) in result.goodSport" :key="idx">
						<view class="every-box">
							<u-lazy-load height="170" border-radius="10" img-mode="aspectFill" :image="item.classImageUrl">
							</u-lazy-load>
							<view class="text-opop">
								{{item.name}}
							</view>
						</view>
					</block>
					<view class="zhan">
					</view>
				</view>
			</view>
			<view class="w706 suggest" v-show="result.goodArticles.length!=0">
				<view class="causeTitle">
					疾病百科
					<view class="moreTitle" @tap.stop="navurl('/pages/subpackage/find/cyclopedia/cyclopedia')">
						更多
					</view>
				</view>
				<view class="wieww670" style="width: 670upx;">
					<block v-for="(item,idx) in result.goodArticles" :key="idx">
						<view class="weui-flex articleBody" @tap.stop="navurl('/pages/subpackage/find/articleDetails/details?id=' + item.articleId)">
							<view class="articleView">
								<view class="articleContent text-line">
									{{item.articleTitle}}
								</view>
								<view class="lockbody">
									<view class="lockView"></view>{{item.readNum}}
								</view>
							</view>
							<view class="articleImage">
								<u-lazy-load border-radius="10" height="160" img-mode="aspectFill" :image="item.coverUrl"></u-lazy-load>
							</view>
						</view>
						<u-line class="u-line" v-show="articleList.length-1 !=idx"></u-line>
					</block>
				</view>
			</view>
			<view class="w706 suggest" v-if="result.recommendedGoods.length>1">
				<view class="causeTitle">
					推荐商品
					<navigator open-type="switchTab" url="/pages/tab/college" class="moreTitle" hover-class="hoverbgfff">
						更多
					</navigator>
				</view>
				<scroll-view scroll-x="true"  style="white-space: nowrap;display: flex;margin-top:26upx;">
					<view v-if="result.recommendedGoods.length != 1">
						<block v-for="(item,idx) in result.recommendedGoods" :key="idx">
							<!--  @tap.stop="commodity(item)" -->
							<view class="shang-Pinview">
								<navigator target="miniProgram" open-type="navigate" app-id="wxeb719b5bc850729e"
									:path="item.detailUrl" extra-data="" version="release" hover-class="hoverbgfff">
								<image  class="shang-image" :src="item.goodsImageUrl" mode=""></image>
								<view class="shang-title">
									{{item.title}}
								</view>
								<view class="shang-flex">
									<view class="shang-view" style="color: #F56767;">
										¥{{item.salePrice}}
									</view>
									<!-- <view class="shang-view" style="text-align: right;color: #999999;">
										月销{{item.salesNum}}
									</view> -->
								</view>
								</navigator>
							</view>
						</block>
					</view>
					<view v-else>
						<block v-for="(item,idx) in result.recommendedGoodsList" :key="idx">
							<!-- @tap.stop="commodity(item)" -->
							<view class="shang-Pinview1" >
								<navigator target="miniProgram" open-type="navigate" app-id="wxeb719b5bc850729e"
									:path="item.detailUrl" extra-data="" version="release" hover-class="hoverbgfff">
								<image  class="shang-image1" :src="item.goodsImageUrl" mode=""></image>
								<view class="shang-rview">
									<view class="shang-title1 text-line">
										{{item.title}}
									</view>
									<view class="shang-flex1">
										<view class="shang-view1" style="color: #F56767;">
											¥{{item.salePrice}}
										</view>
										<view class="shang-view1" style="text-align: right;color: #999999;">
											月销{{item.salesNum}}
										</view>
									</view>
								</view>
								</navigator>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
			<view style="height: 200upx;">
			</view>
		</view>
		<view class="loading-box">
		      <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
	</view>
</template>
<script>
import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"
import uLine from "@/uview-ui/components/u-line/u-line.vue"
import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"
import uParse from "@/uview-ui/components/u-parse/u-parse.vue"

	export default {
		components: {
			uParse,
			uLazyLoad,
			uLine,
			uLoading,
		},
		data() {
			return {
				userAnsId:'',//测评id
				loadingone:false,
				foodYiji:true,
				result: '', //后端数据
				articleList: [
				],
				exerciseList: [
				],
				cause2List: [],
				causeList: [],

			}
		},
		onLoad(e) {
			// this.loadingone = true;
			// /disease/userDisease/getByDiseaseIdAndUserId
			let userAnsId = e.userAnsId?e.userAnsId:''//测评id有可能为空   1404 为合并   报告页面为动态
			// e.diseaseId = 2;
			this.userAnsId = userAnsId
			let userId = uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z').userId;
			// userId = 222;
			this.getByDiseaseIdAndUserId(e.diseaseId, userAnsId, userId)
		},
		methods: {
			//跳转地址
			navurl(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 推荐商品
			commodity(item){
				// console.log(item.detailUrl)
// 				[{"goodsId":1308965580153,"title":"测试门店商品","salePrice":0.01,"goodsImageUrl":"","goodsSlogan":null,"storeId":"2337191653","detailUrl":"","salesNum":null},{"goodsId":1309053880153,"title":"ceshidsfdfsfds","salePrice":0.02,"goodsImageUrl":"https://image-c.weimobwmc.com/saas-wxbiz/d43abbb3a7714706884793cfbf37d6bd.jpg","goodsSlogan":"1231232132132132","storeId":"2337191653,2384280653,2467441653","detailUrl":"https://100001351653.retail.n.weimob.com/saas/retail/100001351653/2467441653/goods/detail?id=1309053880153","salesNum":null}]"// riskNameList: ["缺乏运动", "身体超重", "过量饮酒", "长期吸烟"]// item.detailUrl = 'https://100001351653.retail.n.weimob.com/saas/retail/100001351653/2467441653/goods/detail?id=1309053880153'
				// uni.navigateTo({
				// 	url:'/pages/embedded/embedded?src=https://100001351653.retail.n.weimob.com/saas/retail/100001351653/2467441653/goods/detail?id=1309053880153'
				// })
			},
			// 获取任务
			getByDiseaseIdAndUserId(diseaseId, userAnsId, userId) {
				let _this = this;
				_this.loadingone = true
				this.$api.get(global.apiUrls.getByDiseaseIdAndUserId + '?diseaseId=' + diseaseId + '&userAnsId=' +
						userAnsId + '&userId=' + userId, {})
					.then(res => {
						if (res.data.code == 1000) {
							let result = res.data.result;
							result.goodSport = JSON.parse(result.goodSport);
							result.goodArticles = JSON.parse(result.goodArticles);
							result.diseaseSymptom = result.diseaseSymptom.split(',')
							if (result.riskWeight < 30) { //整理段位低
								result.risk = 1
							} else if (result.riskWeight < 50) {
								result.risk = 2
							} else if (result.riskWeight < 60) {
								result.risk = 3
							} else {
								result.risk = 4
							}
							result.recommendedGoods = JSON.parse(result.recommendedGoods)
							result.diseaseDesc = result.diseaseDesc+''
							_this.result = result
							_this.loadingone = false
							console.log(result, 188)
						}
					}).catch(err => {})

				// uni.request({
				// 	url:'http://192.168.100.9:18600/health-service/disease/userDisease/getByDiseaseIdAndUserId?diseaseId=2&userAnsId=1404&userId=222',
				// 	header:{
				// 		'Authorization':uni.getStorageSync(global.IS_DEV?'USER_TOKEN_BSY_T':'USER_TOKEN_BSY_Z'),
				// 		userType: 1, //用户类型 1:C端用户  2:员工
				// 	},
				// 	success(res) {
				// 		if (res.data.code == 1000) {
				// 			uni.showToast({
				// 				title: res.data.message,
				// 				icon: "none",
				// 				duration: 2000
				// 			});
				// 			let result = res.data.result;
				// 			result.goodSport = JSON.parse(result.goodSport);
				// 			result.goodArticles = JSON.parse(result.goodArticles);
				// 			result.diseaseSymptom = result.diseaseSymptom.split(',')
				// 			if (result.riskWeight < 30) { //整理段位低
				// 				result.risk = 1
				// 			} else if (result.riskWeight < 50) {
				// 				result.risk = 2
				// 			} else if (result.riskWeight < 60) {
				// 				result.risk = 3
				// 			} else {
				// 				result.risk = 4
				// 			}
				// 			// JSON.parse(result.diseaseDetail)
				// 			// result.diseaseDetail = eval('(' + result.diseaseDetail + ')');
				// 			_this.result = result
				// 			_this.loadingone = false
				// 			console.log(result, 188)
				// 		}else{
				// 			uni.showToast({
				// 				title: res.data.message,
				// 				icon: "none",
				// 				duration: 2000
				// 			});
				// 		}
				// 	},
				// 	fail(){
				// 		uni.showToast({
				// 			title: '失败',
				// 			icon: "none",
				// 			duration: 2000
				// 		});
				// 	},
				// 	complete(){
				// 		uni.showToast({
				// 			title: '通用',
				// 			icon: "none",
				// 			duration: 2000
				// 		});
				// 	}

				// })
			},
		}
	}
</script>

<style lang="scss">
	@import url("../basescss/basescss.scss");
	.shang-Pinview{
		width: 321upx;
		height: 399upx;
		background: #F5F5F5;
		border-radius: 16upx;
		display: inline-block;
		margin-right: 24upx;
		.shang-image{
			width: 321upx;
			height: 224upx;
			border-radius: 16upx 16upx 0 0;
		}
		.shang-title{
			width: 276upx;
			height: 84upx;
			font-size: 30upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 42upx;
			margin: 12upx auto 0;
		}
		.shang-flex{
			display: flex;
			width: 280upx;
			margin: 0 auto;
			.shang-view{
				width: 50%;
				font-size: 26upx;
			}
		}
	}
	.shang-Pinview1{
		width: 680upx;
		display: flex;
		.shang-image1{
			width: 235upx;
			height: 164upx;
			border-radius: 10upx;
		}
		.shang-rview{
			width: 420upx;
			margin-left: 26upx;
			.shang-title1{
				font-size: 26uupx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 37upx;
				height: 120upx;
			}
			.shang-flex1{
				display: flex;
				.shang-view1{
					width: 50%;
					font-size: 26upx;
				}
			}
		}
	}
	.w706 {
		width: 706upx;
		background: #FFFFFF;
		border-radius: 25px;
		margin: 30upx auto 0;
	}

	.particularsp {
		padding: 24upx 22upx;
	}

	.particulars-title {
		height: 115upx;
		line-height: 75upx;
		font-size: 54upx;
		font-weight: 500;
		color: #333333;
		line-height: 75upx;
	}

	.shade {
		width: 663upx;
		height: 22upx;
		background: linear-gradient(270deg, #0077FF 0%, #00B7FF 12%, #17EEFF 25%, #45F6D0 38%, #79EBB0 52%, #D2E1AD 65%, #E4B46A 80%, #F37C30 90%, #FF0000 100%);
		box-shadow: 0 2upx 2upx 0 rgba(0, 0, 0, 0.12);
		border-radius: 21upx;
		margin: 34upx 0 0;
		position: relative;
	}

	.shade-pa1,
	.shade-pa2,
	.shade-pa3,
	.shade-pa4 {
		width: 65upx;
		height: 65upx;
		position: absolute;
		background: #05C4FF;
		top: -80upx;
		left: 40upx;
		border-radius: 50%;
		font-size: 15upx;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 65upx;
		text-align: center;
	}

	.shade-pa2 {
		left: 220upx;
	}

	.shade-pa3 {
		left: 380upx;
	}

	.shade-pa4 {
		left: 540upx;
	}

	.shade-pr {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.shade-pr::before {
		content: '';
		width: 0;
		height: 0;
		position: absolute;
		bottom: -24upx;
		left: 50%;
		transform: translateX(-50%);
		border-left: 10upx solid transparent;
		border-right: 10upx solid transparent;
		border-top: 30upx solid #05C4FF;
	}

	.type-text {
		width: 164upx;
		text-align: center;
		padding: 14upx 0 10upx;
		font-size: 24upx;
		font-weight: 400;
		color: #485465;
		line-height: 33upx;
	}

	.type-texta {
		position: relative;
	}

	.type-texta::before {
		content: '';
		width: 1px;
		height: 16upx;
		background: #E3E3E3;
		right: 0;
		top: 6upx;
		position: absolute;
	}

	.causeView {
		display: inline-block;
		min-width: 116upx;
		height: 66upx;
		padding: 6upx 16upx;
		line-height: 60upx;
		box-sizing: border-box;
		background: #2EA7E0;
		font-size: 24upx;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		margin-right: 20upx;
		border-radius: 14upx;
	}

	.causeB {
		padding: 23upx 27upx 22upx;
		font-size: 36upx;
		font-weight: 400;
		color: #333333;
		line-height: 64upx;
	}

	.causeTitle {
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		line-height: 50upx;
		position: relative;
		left: 30upx;
	}

	.causeTitle::before {
		content: '';
		width: 9upx;
		height: 25upx;
		position: absolute;
		top: 14upx;
		left: -30upx;
		background: #2EA7E0;
		border-radius: 5upx;
	}

	.suggest {
		padding: 23upx 27upx 30upx;
	}

	.suitable {
		width: 120upx;
		height: 40upx;
		font-size: 24upx;
		font-weight: 500;
	}

	.avoid {
		width: 120upx;
		height: 40upx;
		font-size: 24upx;
		font-weight: 500;
		color: #333333;
	}

	.actavecolor {
		color: #2EA7E0;
		text-decoration: underline
	}

	.flex-jy {
		margin: 30upx 0 0;
	}

	.flexImagel {
		width: 114upx;
		height: 114upx;
	}

	.flexRview {
		width: 513upx;
		margin-left: 10upx;
	}

	.flexTitle {
		font-size: 38upx;
		font-weight: 600;
		color: #4A4A4A;
		line-height: 53upx;
		padding: 4upx 0;
	}

	.flexText {
		font-size: 28upx;
		font-weight: 400;
		color: #4A4A4A;
		line-height: 40upx;
	}

	.exercise {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.every-box {
			width: 170upx;
			height: 170upx;
			margin-top: 40upx;
			position: relative;
			.text-opop {
				width: 170upx;
				height: 44upx;
				color: #fff;
				text-align: center;
				line-height: 44upx;
				position: absolute;
				bottom: 0;
				// background: rbga(255,255,255,0.3);
				background: rgba(0, 0, 0, .5);
				border-radius: 0 0 10upx 10upx;

			}
		}

		.zhan {
			width: 30%;
			// height: 0;
		}
	}

	.moreTitle {
		float: right;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		position: relative;
		right: 80upx;
	}

	.moreTitle:before {
		content: '';
		position: absolute;
		top: 4upx;
		right: -40upx;
		width: 36upx;
		height: 36upx;
		background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
		background-size: 36upx 36upx;
	}
</style>
